import React, { Component } from 'react'
import { Layout, Breadcrumb } from 'antd';
import 'antd/dist/antd.css'
import PubSub from 'pubsub-js'
import P1_open_carema from '../../../pages_1/P1_OpenCarema'
import P2_open_microphone from '../../../pages_1/P2_OpenMicroPhone'
import P3_open_canvas from '../../../pages_1/P3_Canvas'
import P4_open_screen_share from '../../../pages_1/P4_ScreenShare'
import P5_video_filter from '../../../pages_1/P5_VideoFilter'
import P6_local_file from '../../../pages_1/P6_LocalFile'
import P7_local_cavans from '../../../pages_1/P7_LocalCanvas'
import P8_record_audio from '../../../pages_1/P8_RecordAudio'
import P9_record_video from '../../../pages_1/P9_RecordVideo'
import P10_rtcconnection from '../../../pages_1/P10_RTCConnection'
import P11_peerconn_video from '../../../pages_1/P11_PeerConnVideo'
import P12_peerconn_canvas from '../../../pages_1/P12_PeerConnCanvas'
import P13_peerconn_text from '../../../pages_1/P13_PeerConnText'
import P14_peerconn_file from '../../../pages_1/P14_PeerConnFile'

import P2PLogin from '../../../pages_2/P1_One2One/pages/Login'
import P2PClient from '../../../pages_2/P1_One2One/pages/Client'
export default class Main extends Component {
    state = {
        pageinfo: [],
        isP2PLogin: false
    }
    componentDidMount() {
        PubSub.subscribe('left_select_change', (message, data) => {
            console.log('main topic:', message, data);
            this.setState({ pageinfo: data });
        })
    }
    renderInfo = (id, isP2PLogin) => {
        console.log('render info:', id)
        if (id === '1') {
            return <P1_open_carema />
        }
        if (id === '2') {
            return <P2_open_microphone />
        }
        if (id === '3') {
            return <P3_open_canvas />
        }
        if (id === '4') {
            return <P4_open_screen_share />
        }
        if (id === '5') {
            return <P5_video_filter />
        }
        if (id === '6') {
            return <P6_local_file />
        }
        if (id === '7') {
            return <P7_local_cavans />
        }
        if (id === '8') {
            return <P8_record_audio />
        }
        if (id === '9') {
            return <P9_record_video />
        }
        if (id === '10') {
            return <P10_rtcconnection />
        }
        if (id === '11') {
            return <P11_peerconn_video />
        }
        if (id === '12') {
            return <P12_peerconn_canvas />
        }
        if (id === '13') {
            return <P13_peerconn_text />
        }
        if (id === '14') {
            return <P14_peerconn_file />
        }
        if (id === '15') {
            return !isP2PLogin ? <P2PLogin /> : <P2PClient />
        }
    }
    render() {
        const { id, name, isP2PLogin } = this.state.pageinfo
        return (
            <Layout style={{ padding: '0 2px 24px' }}>
                {/* <Breadcrumb style={{ margin: '16px 0' }}>
                    {this.state.pageinfo.map((Object) => {
                        { console.log(Object.name) }
                        return (
                            <Breadcrumb.Item key={Object.id}>{Object.name}</Breadcrumb.Item>
                        )
                    })}
                </Breadcrumb> */}
                {
                    this.renderInfo(id, isP2PLogin)
                }
            </Layout>
        )
    }
}
